<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容切换</title>
    <style>
        #tables{
            width: 416px;
            height: 218px;
            border:solid 1px;
            margin: 0 auto;
        }
        #tables>.nav{
            overflow: hidden;
        }
        #tables>.nav>span{
            width: 104px;
            float: left;
            padding: 5px 0;
            text-align: center;
            cursor: pointer;
        }
        .hid{
            display: none;
        }
        .show{
            display: block;
        }
        .bg{
            background-color: #c9c1ca;
        }
        .focus{
            background-color:#0392cc;
            color: white;
        }
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            border-bottom: dashed 1px #cccccc;
            text-align: left;
            padding: 5px;
            margin: 5px;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="tables">
        <div class="nav">
            <span class="bg">热点新闻</span>
            <span class="bg">合作播报</span>
            <span class="bg">行业咨询</span>
            <span class="focus">运营攻略</span>
        </div>
        <div class="hid">
            <ul>
                <li><a href="https://www.baidu.com">[热点新闻]&nbsp;重大突破！马斯克宣布</a></li>
                <li><a href="https://www.baidu.com">[热点新闻]&nbsp;6天卖爆800万份！10天狂赚13亿</a></li>
                <li><a href="https://www.baidu.com">[热点新闻]&nbsp;热搜第一！福原爱带货首播</a></li>
                <li><a href="https://www.baidu.com">[热点新闻]&nbsp;热搜第一！福原爱带货首播</a></li>
                <li><a href="https://www.baidu.com">[热点新闻]&nbsp;重大突破！马斯克宣布</a></li>
            </ul>
        </div>
        <div class="hid"><ul>
                <li><a href="https://www.baidu.com">[合作播报]&nbsp;重大突破！马斯克宣布</a></li>
                <li><a href="https://www.baidu.com">[合作播报]&nbsp;6天卖爆800万份！10天狂赚13亿</a></li>
                <li><a href="https://www.baidu.com">[合作播报]&nbsp;热搜第一！福原爱带货首播</a></li>
                <li><a href="https://www.baidu.com">[合作播报]&nbsp;热搜第一！福原爱带货首播</a></li>
                <li><a href="https://www.baidu.com">[合作播报]&nbsp;重大突破！马斯克宣布</a></li>
            </ul></div>
        <div class="hid"><ul>
                <li><a href="https://www.baidu.com">[行业咨询]&nbsp;重大突破！马斯克宣布</a></li>
                <li><a href="https://www.baidu.com">[行业咨询]&nbsp;6天卖爆800万份！10天狂赚13亿</a></li>
                <li><a href="https://www.baidu.com">[行业咨询]&nbsp;热搜第一！福原爱带货首播</a></li>
                <li><a href="https://www.baidu.com">[行业咨询]&nbsp;热搜第一！福原爱带货首播</a></li>
                <li><a href="https://www.baidu.com">[行业咨询]&nbsp;重大突破！马斯克宣布</a></li>
            </ul></div>
        <div class="show"><ul>
                <li><a href="https://www.baidu.com">[运营策略]&nbsp;重大突破！马斯克宣布</a></li>
                <li><a href="https://www.baidu.com">[运营策略]&nbsp;6天卖爆800万份！10天狂赚13亿</a></li>
                <li><a href="https://www.baidu.com">[运营策略]&nbsp;热搜第一！福原爱带货首播</a></li>
                <li><a href="https://www.baidu.com">[运营策略]&nbsp;热搜第一！福原爱带货首播</a></li>
                <li><a href="https://www.baidu.com">[运营策略]&nbsp;重大突破！马斯克宣布</a></li>
            </ul></div>
    </div>
    <script>
        // 找到目标元素
        var focus=document.getElementsByTagName("SPAN")
        var cons=document.getElementsByTagName("div")
        // 将所有的背景色样式置为默认
        function clear_style(){
            for (i=0;i<focus.length;i++){
                focus[i].className="bg"
            }
        }
        // 将所有的内容样式设为不可见
        function clear_con(){
             for (i=2;i<cons.length;i++){
                 cons[i].className="hid"
             }
        }
        focus[0].onclick=function (){
            clear_style()
            focus[0].className="focus"
            clear_con()
            cons[2].className="show"
        }
        focus[1].onclick=function (){
            clear_style()
            focus[1].className="focus"
            clear_con()
            cons[3].className="show"
        }
        focus[2].onclick=function (){
            clear_style()
            focus[2].className="focus"
            clear_con()
            cons[4].className="show"
        }
        focus[3].onclick=function (){
            clear_style()
            focus[3].className="focus"
            clear_con()
            cons[5].className="show"
        }
    </script>
</body>
</html>